<template>
  <div class="linkMange">
    <h2 class="head">七里景区数据大屏</h2>
    <div class="linkWrap">
      <ul class="amountStatistics">
        <li v-for="(item, i) in countStatistics" :key="i">
          <p class="title">{{item.name}}</p>
          <p class="num blue"><count-to :start-val="0" :end-val="item.value" :decimals="0" :duration="2600" /></p>
        </li>
      </ul>
      <div class="echartStatistics">
        <ul class="echartUl">
          <li>
            <div class="normal_side"><i class="side_box side_tl"></i><i class="side_box side_tr"></i></div>
            <div class="normal_mid">
              <h3><i class="arrow arr_l"></i>注册人数<i class="arrow arr_r"></i></h3>
              <div class="cpInvest" ref="chartRef">
                <chart-pie v-if="typeData.isShow" :taskData="typeData.typeReg" :height="chartHeight"/>
                <!-- <div class="chartCircle">
                  <div v-for="(item, i) in typeReg" :key="i" class="chartType" :style="{top: typeRegStype[i].top + 'px', left: typeRegStype[i].left + 'px'}" v-show="!item.ishide">
                    <chart-circle :chart-count="item.percent" :type-data="i" :width-type="10" :width-data="typeRegStype[i].w" :color-first="typeRegStype[i].f" :color-second="typeRegStype[i].t" />
                    <i class="circle_arrow" :style="{top: typeRegStype[i].pointTop + 'px', left: typeRegStype[i].pointLeft + 'px'}"></i>
                  </div>
                </div>
                <div class="cpInvestDetail">
                  <div class="detline" v-for="(item, i) in typeReg" :key="i">
                    <div><i class="investPoint" :style="{backgroundColor: typeRegStype[i].m}"></i><span class="investTit">{{item.name}}</span><span v-if="i != 4"><count-to :start-val="0" :end-val="item.percent" :decimals="2" :duration="2600" />%</span></div><div class="investNum"><count-to :start-val="0" :end-val="item.value" :decimals="0" :duration="2600" /></div>
                  </div>
                </div> -->
              </div>
            </div>
            <div class="normal_side side_bottom"><i class="side_box side_bl"></i><i class="side_box side_br"></i></div>
          </li>
          <li>
            <div class="normal_side"><i class="side_box side_tl"></i><i class="side_box side_tr"></i></div>
            <div class="normal_mid">
              <h3><i class="arrow arr_l"></i>商家排行榜<i class="arrow arr_r"></i></h3>
              <div class="cpInvest" ref="chartRef">
                <chart-bar v-if="rankBusinessmanData.isShow" :taskName="rankBusinessmanData.name" :taskVal="rankBusinessmanData.count" :height="chartHeight" chartType="xchart" />
              </div>
            </div>
            <div class="normal_side side_bottom"><i class="side_box side_bl"></i><i class="side_box side_br"></i></div>
          </li>
        </ul>
        <ul class="echartUl">
          <li>
            <div class="normal_side"><i class="side_box side_tl"></i><i class="side_box side_tr"></i></div>
            <div class="normal_mid">
              <h3><i class="arrow arr_l"></i>任务统计<i class="arrow arr_r"></i></h3>
              <div class="cpInvest" ref="chartRef">
                <chart-bar v-if="taskData.isShow" :taskName="taskData.name" :taskVal="taskData.count" :height="chartHeight" />
              </div>
            </div>
            <div class="normal_side side_bottom"><i class="side_box side_bl"></i><i class="side_box side_br"></i></div>
          </li>
          <li>
            <div class="normal_side"><i class="side_box side_tl"></i><i class="side_box side_tr"></i></div>
            <div class="normal_mid">
              <h3><i class="arrow arr_l"></i>退役军人志愿者排行榜<i class="arrow arr_r"></i></h3>
              <div class="cpInvest" ref="chartRef">
                <chart-bar v-if="rankServicemenData.isShow" :taskName="rankServicemenData.name" :taskVal="rankServicemenData.count" :height="chartHeight" chartType="xchart" />
              </div>
            </div>
            <div class="normal_side side_bottom"><i class="side_box side_bl"></i><i class="side_box side_br"></i></div>
          </li>
        </ul>
      </div>
      <div class="swiperBox">
        <h3>最新兑换记录<i class="rightArr"></i></h3>
        <div class="borderB"></div>
        <i class="titleBotBg"></i>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div v-for="(item, i) in sysStatistics" :key="i" class="swiper-slide">
              <div class="slideTitle">{{item.name}}</div>
              <div class="slideCont">
                <div v-for="(col, o) in item.data" :key="o" class="contbar">
                  <div>{{col.name}}</div>
                  <div v-if="col.type === 1" class="num"><count-to :start-val="0" :end-val="col.value" :decimals="0" :duration="2600" /></div>
                  <div v-else class="num">{{col.value}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { validatenull } from "@/util/validate";
import { calcDate } from "@/util/date.js";
import { getStore } from "@/util/store.js";
import CountTo from '@/components/countTo/vue-countTo';
// import ChartCircle from '@/components/chart/chartCircle';
import ChartBar from '@/components/chart/chartBar';
import ChartPie from '@/components/chart/chartPie';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
//import { getBusinessman, getIntegral, getRegister, getWork, getIntegralListNew, getStatCountGoodsIntegral, getStatCountExchangeGoodsIntegral, getStatCountExchangeGoodsDiscount, getStatCountScan, getRankBusinessman, getRankServicemen } from "@/api/linkManage";
import {mapGetters} from "vuex";
export default {
  name: "screen",
  data() {
    this.integralListNew()
    return {
      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: "",
      countStatistics: [
        {name: '崇军商家数', value: 0 },
        {name: '总积分', value: 0 },
        {name: '兑换积分', value: 0 },
        {name: '兑换商品总数', value: 0 },
        {name: '已兑换商品数', value: 0 },
        {name: '到店扫码总次数', value: 0 }
      ],
      /*
      typeReg: [
        {name: '退役军人', value: 0, percent: 0},
        {name: '优抚对象', value: 0, percent: 0},
        {name: '个人志愿者', value: 0, percent: 0},
        {name: '志愿者团队', value: 0, percent: 0},
        {name: '总注册人数', value: 0, percent: 0}
      ],
      typeRegStype: [
        { w: '46', top: '36', left: '36', pointTop: '1.5', pointLeft: '21', f: '#FF0518', t: '#FE7BB2', m: '#FF5678'},
        { w: '70', top: '24', left: '24', pointTop: '1.5', pointLeft: '33', f: '#FF5E27', t: '#F9DA71', m: '#FD9045'},
        { w: '94', top: '12', left: '12', pointTop: '2.5', pointLeft: '46', f: '#34B700', t: '#7CFCD9', m: '#7FEB07'},
        { w: '118', top: '0', left: '0', pointTop: '3', pointLeft: '58', f: '#006AC7', t: '#20D4FF', m: '#0987D6'},
        { w: '118', top: '0', left: '0', pointTop: '3', pointLeft: '58', f: '#006AC7', t: '#20D4FF', m: '#fff000'}
      ],
       */
      typeData: {
        typeReg: [
          {name: '退役军人', value: 0, percent: 0},
          {name: '优抚对象', value: 0, percent: 0},
          {name: '个人志愿者', value: 0, percent: 0},
          {name: '志愿者团队', value: 0, percent: 0}
        ],
        isShow: false
      },
      taskData: {
        name: ['总任务', '完成任务','活动中任务数', '招募中任务数', '无效任务数'],
        count: [0, 0, 0, 0, 0],
        isShow: false
      },
      sysStatistics: [],
      rankBusinessmanData: {
        name: [],
        count: [],
        isShow: false
      },
      rankServicemenData: {
        name: [],
        count: [],
        isShow: false
      },
      chartHeight: '0px'
    };
  },
  created() {
    this.businessmanTotal()
    this.IntegralTotal()
    this.registerTotal()
    this.wordTotal()
    this.rankBusinessman()
    this.rankServicemen()
    this.integralListNew()
    this.refreshToken();
    this.statCountGoodsIntegral()
    this.statCountExchangeGoodsIntegral()
    this.statCountScan()
  },
  mounted() {
    this.chartHeight = this.$refs.chartRef.offsetHeight + 'px'
  },
  computed: mapGetters(["website"]),
  methods: {
    // 10分钟检测一次token
    refreshToken() {
      this.refreshTime = setInterval(() => {
        const token = getStore({
          name: "token",
          debug: true
        });
        const date = calcDate(token.datetime, new Date().getTime());
        if (validatenull(date)) return;
        if (!(date.seconds >= this.website.tokenTime) && !this.refreshLock) {
          this.refreshLock = true;
          this.$store
            .dispatch("RefreshToken")
            .then(() => {
              this.refreshLock = false;
            })
            .catch(() => {
              this.refreshLock = false;
            });
        }
      }, 1000 * 60 * 10);
    },
    businessmanTotal() {
      getBusinessman().then((res) => {
        if (res.data.code === 200 && res.data.data) {
          this.countStatistics[0].value = res.data.data
        }
      });
    },
    IntegralTotal() {
      getIntegral().then((res) => {
        if (res.data.code === 200 && JSON.stringify(res.data.data) != '{}') {
          this.countStatistics[1].value = res.data.data.integralTotal
          this.countStatistics[2].value = res.data.data.integralExchange
        }
      });
    },
    statCountGoodsIntegral() {
      getStatCountGoodsIntegral().then((res) => {
        if (res.data.code === 200) {
          this.countStatistics[3].value = res.data.data
        }
      });
    },
    statCountExchangeGoodsIntegral() {
      getStatCountExchangeGoodsIntegral().then((res) => {
        if (res.data.code === 200) {
          this.countStatistics[4].value = res.data.data
        }
      });
    },
    statCountScan() {
      getStatCountExchangeGoodsDiscount().then((res) => {
        if (res.data.code === 200) {
          getStatCountScan().then((res1) => {
            if (res1.data.code === 200) {
              this.countStatistics[5].value = res.data.data + res1.data.data
            }
          });
        }
      });
    },
    registerTotal() {
      getRegister().then((res) => {
        if (res.data.code === 200 && JSON.stringify(res.data.data) != '{}') {
          this.typeData.typeReg[0].value = res.data.data.servicemenCount > -1 ? res.data.data.servicemenCount : 0
          this.typeData.typeReg[1].value = res.data.data.priorityCount > -1 ? res.data.data.priorityCount : 0
          this.typeData.typeReg[2].value = res.data.data.volunteerCount > -1 ? res.data.data.volunteerCount : 0
          this.typeData.typeReg[3].value = res.data.data.groupCount > -1 ? res.data.data.groupCount : 0
          this.typeData.isShow = true
          // this.typeReg[4].value = res.data.data.total > -1 ? res.data.data.total : 0
          const total = res.data.data.total > -1 ? res.data.data.total : 0
          this.typeData.typeReg[0].percent = this.getPerent(this.typeData.typeReg[0].value, total)
          this.typeData.typeReg[1].percent = this.getPerent(this.typeData.typeReg[1].value, total)
          this.typeData.typeReg[2].percent = this.getPerent(this.typeData.typeReg[2].value, total)
          this.typeData.typeReg[3].percent = this.getPerent(this.typeData.typeReg[3].value, total)
        }
      });
    },
    getPerent(num, total) {
      num = parseFloat(num);
      total = parseFloat(total);
      if (isNaN(num) || isNaN(total)) {
        return 0
      }
      return total <= 0 ? 0 : (Math.round((num / total) * 10000) / 100.0)
    },
    wordTotal() {
      getWork().then((res) => {
        if (res.data.code === 200 && JSON.stringify(res.data.data) != '{}') {
          this.taskData.count[0] = res.data.data.total > -1 ? res.data.data.total : 0
          this.taskData.count[1] = res.data.data.finishCount > -1 ? res.data.data.finishCount : 0
          this.taskData.count[2] = res.data.data.activityCount > -1 ? res.data.data.activityCount : 0
          this.taskData.count[3] = res.data.data.runningCount > -1 ? res.data.data.runningCount : 0
          this.taskData.count[4] = res.data.data.invalidCount > -1 ? res.data.data.invalidCount : 0
        }
        this.taskData.isShow = true
      });
    },
    integralListNew() {
      getIntegralListNew({limit: 10}).then((res) => {
        if (res.data.code === 200 && res.data.data.length > 0) {
          res.data.data.forEach(element => {
            let data = []
            data[0] = {
              name: '兑换商品',
              value: element.goodsName ? element.goodsName : '商品暂无描述',
              type: 0
            }
            data[1] = {
              name: '兑换积分',
              value: element.integral > -1 ? element.integral : 0,
              type: 1
            }
            data[2] = {
              name: '兑换人',
              value: element.userName ? element.userName : '--',
              type: 0
            }
            data[3] = {
              name: '时间',
              value: element.createTime,
              type: 0
            }
            this.sysStatistics.push({
              name: element.goodsCompany ? element.goodsCompany : '',
              data: data
            })
          })
        }
        this.$nextTick(function () {
          new Swiper('.swiper-container', {
            slidesPerView: 4,
            spaceBetween: 20,
            loop: true,
            autoplay: 3000,
            speed: 300
          });
        })
      });
    },
    rankBusinessman() {
      getRankBusinessman().then((res) => {
        if (res.data.code === 200 && res.data.data && res.data.data.length > 0) {
          this.rankBusinessmanData.name = []
          this.rankBusinessmanData.count = []
          res.data.data.forEach(item => {
            if (item && item.name) {
              if (item.count < 0) item.count = 0
              this.rankBusinessmanData.name.push(item.name)
              this.rankBusinessmanData.count.push(item.count)
            }
          })
          this.rankBusinessmanData.isShow = true
        }
      });
    },
    rankServicemen() {
      getRankServicemen().then((res) => {
        if (res.data.code === 200 && res.data.data && res.data.data.length > 0) {
          this.rankServicemenData.name = []
          this.rankServicemenData.count = []
          res.data.data.forEach(item => {
            if (item && item.name) {
              if (!item.count || item.count < 0) item.count = 0
              this.rankServicemenData.name.push(item.name)
              this.rankServicemenData.count.push(item.count)
            }
          })
          this.rankServicemenData.isShow = true
        }
      });
    }
  },
  components: {CountTo, ChartPie, ChartBar}
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.linkMange {
  width: 100%;
  background: #070818 url(/img/bg/link/bg.png) no-repeat top center;
  background-size: 100% auto;
  font-size: 12px;
  color: #ffffff;
  .head {
    padding-top: 17px;
    font-size: 30px;
    color: #ffffff;
    text-align: center;
    p {
      font-size: 16px;
      font-weight: normal;
      color: #B1F5FE;
    }
  }
  .linkWrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 57px);
    .amountStatistics {
      display: flex;
      justify-content: center;
      height: 80px;
      margin: 80px 0 0;
      li {
        display: flex;
        flex-direction: column;
        width: 22.5%;
        height: 80px;
        margin: 0 3.5%;
        background: url(/img/bg/link/di-xiao.png) no-repeat;
        background-size: 100% 100%;
        .title {
          font-size: 18px;
          text-align: center;
        }
        .num {
          flex: 1;
          align-items: center;
          justify-content: center;
          display: flex;
          font-family: UniDream;
          font-size: 30px;
          text-shadow:0 0 40px rgba(0,255,255,.8),-0 -0 40px rgba(0,255,255,.8);
        }
      }
    }
    .echartStatistics {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100%;
      padding-left: 40px;
      overflow: hidden;
      .echartUl {
        display: flex;
        height: calc(50% - 40px);
        padding: 20px 0 0;
        li {
          display: flex;
          flex-direction: column;
          width: calc(50% - 40px);
          border: 2px solid rgba(0, 255, 246, 0.2);
          box-shadow: inset 0px 0px 40px 0px rgba(26, 106, 227, 0.6);
          border-radius: 5px;
          margin-right: 40px;
          .side_box {
            width: 12px;
            height: 12px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            &.side_bottom {
              align-self: flex-end;
            }
          }
          .normal_side {
            display: flex;
            .side_tl {
              margin-top: 10px;
              margin-left: 10px;
              background-image: url(/img/bg/link/jiao-zs.png);
            }
            .side_tr {
              margin-top: 10px;
              margin-right: 10px;
              margin-left: auto;
              background-image: url(/img/bg/link/jiao-ys.png);
            }
            .side_br {
              margin-right: 10px;
              margin-bottom: 10px;
              margin-left: auto;
              background-image: url(/img/bg/link/jiao-yx.png);
            }
            .side_bl {
              margin-left: 10px;
              margin-bottom: 10px;
              background-image: url(/img/bg/link/jiao-zx.png);
            }
          }
          &:first-child {
            .cpInvest {
              padding: 0 15% 0 10%;
            }
          }
          .cpInvest {
            display: flex;
            flex: 1;
            align-items: center;
            .chartCircle {
              position: relative;
              width: 118px;
              height: 118px;
              .chartType {
                position: absolute;
                z-index: 1;
              }
              .circle_arrow {
                position: absolute;
                z-index: 3;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: #ffffff;
              }
            }
            .cpInvestDetail {
              flex: 1;
              .detline {
                display: flex;
                padding: 5px 0 5px 15%;
                font-size: 16px;
                .investPoint {
                  display: inline-block;
                  width: 6px;
                  height: 6px;
                  margin-right: 10px;
                  border-radius: 3px;
                }
                .investTit {
                  color: rgba(177, 245, 254, 1);
                }
                .investNum {
                  margin-left: auto;
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
      .normal_mid {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      h3 {
        font-size: 18px;
        text-align: center;
      }
      .arrow {
        display: inline-block;
        width: 24px;
        height: 12px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        &.arr_l {
          margin-right: 11px;
          background-image: url(/img/bg/link/icon-jty.png);
        }
        &.arr_r {
          margin-left: 11px;
          background-image: url(/img/bg/link/icon-jtz.png);
        }
      }
    }
    .swiperBox {
      display: flex;
      flex-direction: column;
      padding: 0 40px;
      height: 200px;
      h3 {
        font-size: 15px;
        text-align: left;
        .rightArr {
          display: inline-block;
          width: 150px;
          height: 8px;
          background: url(/img/bg/link/tiao2.png) no-repeat;
        }
      }
      .borderB {
        width: 100%;
        height: 1px;
        margin-top: 10px;
        background: linear-gradient(to right,rgba(26, 106, 227, 0.6),rgba(255, 255, 255, 0));
      }
      .titleBotBg {
        display: flex;
        width: 170px;
        height: 4px;
        background: url(/img/bg/link/tiao1.png) no-repeat;
      }
      .swiper-container {
        height: calc(100% - 40px);
      }
      .swiper-slide {
        height: calc(100% - 40px);
        box-shadow: inset 0px 0px 30px 0px rgba(1, 200, 237, 0.3);
        border-radius: 5px;
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        .slideTitle {
          height: 35px;
          line-height: 35px;
          padding: 0 20px;
          font-size: 13px;
          color: #B1F5FE;
          border-bottom: 1px solid #0E2B5F;
        }
        .slideCont {
          flex: 1;
          padding: 10px 20px 10px;
        }
        .contbar {
          display: flex;
          height: calc(100% / 4);
          font-size: 12px;
          .num {
            margin-left: auto;
            font-weight: bold;
          }
        }
      }
    }
  }
}
@media screen and (min-width: 1921px) {
  .linkMange {
    background-size: 1919px 1079px;
  }
}
@media screen and (max-width: 1540px) {
  .linkMange {
    .head {
      padding-top: 15px;
      font-size: 20px;
      p {
        padding-top: 5px;
        font-size: 12px;
      }
    }
  }
}
@media screen and (max-width: 1250px) {
  .linkMange {
    .head {
      padding-top: 10px;
      font-size: 16px;
      p {
        padding-top: 0;
      }
    }
  }
}
@font-face {
  font-family: 'UniDream';
  src: local('UnidreamLED LED'),
  local('UnidreamLED'),
  url('/img/bg/link/UnidreamLED.ttf')format('truetype');
  font-weight: bold;
}
</style>
